<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>大事件-后台登录页</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <!-- 引入bootstrap的css文件 -->
        <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
        <!-- 引入jq文件 -->
        <script src="./libs/jquery-1.12.4.min.js"></script>
        <!-- 引入bootstrap的js文件 -->
        <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="main_wrap">
            <div class="header">
                <a href="#" class="logo"
                    ><img src="images/logo.png" alt=""
                /></a>
                <div class="copyright">
                    CopyRight © 2019 深圳百秀信息技术股份有限公司<br />All
                    Rights Reserved
                </div>
            </div>

            <div class="login_form_con">
                <div class="login_title"></div>
                <form class="login_form">
                    <i class="iconfont icon-user"></i>
                    <i class="iconfont icon-key"></i>
                    <input
                        type="text"
                        class="input_txt"
                        placeholder="邮箱/手机号"
                    />
                    <input
                        type="password"
                        class="input_pass"
                        placeholder="密码"
                    />
                    <input type="submit" class="input_sub" value="登 录" />
                </form>
            </div>
        </div>
        <!-- 静态模态结构 -->
        <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-label="Close"
                        >
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">温馨提示</h4>
                    </div>
                    <div class="modal-body">
                        <p></p>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-default"
                            data-dismiss="modal"
                        >
                            确定
                        </button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </body>
</html>
<script>
    $(function () {
        $(".input_sub").on("click", function (e) {
            e.preventDefault()
            let username = $(".input_txt").val().trim()
            let password = $(".input_pass").val().trim()
            if (username == "" || password == "") {
                return
            }
            $.ajax({
                type: "post",
                url: "http://localhost:8080/api/v1/admin/user/login",
                data: { username: username, password: password },
                success: function (backData) {
                    if (backData.code == 200) {
                        localStorage.setItem("token75", backData.token)
                        $("#myModal").modal()
                        $(".modal-body").text(backData.msg)
                        $("#myModal").on("hidden.bs.modal", function (e) {
                            window.location = "./index.html"
                        })
                    } else {
                        $("#myModal").modal()
                        $(".modal-body").text(backData.msg)
                    }
                }
            })
        })
    })
</script>
